<template>
  <div class="app-container">
    <aside>Excel表格转为JSON</aside>

    <div style="padding: 8px 24px">
      <el-form label-width="120px">
        <el-row :gutter="12">
          <el-col :span="24">
            <el-form-item label="上传文件：">
              <uploadFile
                :drag="true"
                :action="'/api/api/getFileSheet'"
                @success="fileUpload_success"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="工作表：">
              <el-select
                v-model="seachForm.sheetName"
                placeholder="请选择工作表："
                style="width: 100%"
                @change="sheetChange"
              >
                <el-option
                  v-for="(item, index) in sheetList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            v-if="tableData.length != 0"
            :span="4"
            style="text-align: left"
          >
            <el-button type="primary" @click="Copy($event)"
              >Copy JSON</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <el-table v-if="tableData.length != 0" :data="tableData" height="40vh">
        <el-table-column type="index" width="80" align="center" label="序号" />
        <el-table-column
          v-for="(item, index) in headers"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
            <span v-else>---</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { fileToJson } from "@/api/chuizi";
import clipboard from "@/utils/clipboard";
import tableRouter from "@/router/modules/table";
import uploadFile from "@/components/uploadFile.vue";

export default {
  name: "excel_JSON",
  components: {
    uploadFile,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,

      seachForm: {
        sheetName: "",
        fileId: "",
      },

      tableData: [], // 表格数据
      tableDataString: [], // 表格字符串
      sheetList: [],
      headers: [],
      req_headers: {
        token: JSON.parse(sessionStorage.getItem("userInfo")).token,
      },
      activeName: "JSON",
    };
  },

  methods: {
    // 选择表名
    async sheetChange(e) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const res = await fileToJson(this.seachForm);
      console.log(res, "res");
      if (res.code == 20000) {
        this.tableData = res.data || [];

        // 处理表头的数据
        this.headers = [];
        // 便利第一行对象,因为第一行必定是headers
        for (const key in res.data[0]) {
          this.headers.push({
            prop: key,
            label: res.data[0][key],
          });
        }

        this.tableData.splice(0, 1);
        this.tableDataString = JSON.stringify(this.tableData);
      } else {
        this.$message.error(res.msg);
      }

      loading.close();
    },

    // 复制按牛
    async Copy(e) {
      try {
        await navigator.clipboard.writeText(JSON.stringify(this.tableData));
        this.$message.success("复制成功");
      } catch (error) {
        this.$message.error("复制失败");
      }
    },

    fileUpload_success(e) {
      const { res, file } = e;
      console.log(e);
      if (res.code == 20000) {
        this.$message.success("文件上传成功，请选择sheet页");
        this.sheetList = res.data || [];
        this.seachForm.fileId = res.fileId;
        this.seachForm.sheetName = ""; // 每次上传文件 就清空一下表单数据
        this.tableData = [];
        this.tableDataString = [];
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style></style>
